<template>
  <div class="card-header">
    <div class="user-header">
      <div class="portrait">
        <!-- <img
          class="avatar"
          :src="`${userInfo.photo}`"
          :alt="userInfo.consName"
        /> -->
        <img
          v-if="userInfo.photo"
          class="avatar"
          :src="`${userInfo.photo}`"
          :alt="userInfo.consName"
        />
        <img
          v-else
          class="avatar"
          src="@/assets/mrtx.png"
          :alt="userInfo.consName"
        />
      </div>
      <div class="user-name">
        {{ userInfo.consName }}
        <div class="user-id">ID: {{ userInfo.consId }}</div>
      </div>
    </div>
    <div class="score-box">
      <p>当前积分</p>
      <div class="num">
        {{ this.toDecimalMark(Number(this.userInfo.points)) }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CardHeader",
  props: {},
  data() {
    return {
      userInfo: this.$utils.SessionGet("userInfo"),
    };
  },
  created() {},
  methods: {
    // toDecimalMark(num){
    //   return num.toLocaleString('en-US');
    // }
  },
};
</script>
<style scoped lang="less">
@height: 48px;
.card-header {
  margin: 10px 18px;
  height: 174px;
  padding: 20px;
  color: #fff;
  box-sizing: border-box;
  background: #353535 url("@/assets/record-bg.png") no-repeat;
  background-size: cover;
  border-radius: 8px;
  .user-header {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    .user-name {
      flex: 1;
      padding-left: 12px;
      font-size: 14px;
      font-weight: 700;
      .user-id {
        font-size: 10px;
        color: #999;
        font-weight: normal;
      }
    }
    .portrait {
      .avatar {
        width: 50px;
        height: 50px;
        // border: 2px solid #fff;
        border-radius: 50%;
      }
    }
  }
  .score-box {
    padding-top: 22px;
    p {
      font-size: 12px;
      color: #999;
      font-weight: normal;
    }
    .num {
      color: #fac382;
      font-size: 28px;
      font-weight: 700;
    }
  }
}
</style>
